<!-- 搜索栏 -->
<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
    <div nz-row [nzGutter]="24" style="white-space: nowrap">
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="clientId">客户端ID</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input nz-input formControlName="clientId" placeholder="输入客户端ID" />
                    <div *ngIf="submitted && fm['clientId'].invalid" class="alert">
                        <div *ngIf="fm['clientId'].errors?.['maxlength']">长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="clientId">客户端名称</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input nz-input formControlName="clientName" placeholder="输入客户端名称"/>
                    <div *ngIf="submitted && fm['clientName'].invalid" class="alert">
                        <div *ngIf="fm['clientName'].errors?.['maxlength']">长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="12">
            <div nz-row>
                <nz-col class="search-button-col">
                    <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true"
                        (resetEvent)="onReset()" [create]="false"></app-search-button>
                </nz-col>
            </div>
        </div>
    </div>
</form>

<div nz-row style="margin-top: 4px; white-space: nowrap;">
    <nz-table #expandTable nzShowPagination [nzData]="clients" 
        nzTableLayout="fixed" [nzFrontPagination]="false"
        [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" 
        (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>客户端ID</th>
                <th>客户端名称</th>
                <th>权限范围</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let client of clients">
                <td>{{client.clientId}}</td>
                <td>{{client.clientName}}</td>
                <td>{{client.scopes.join(",")}}</td>
                <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                    <button nz-button class="action-button normal-button" style="width: 65px;" (click)="onEditRole(client.clientId)">应用角色</button>
                    <button nz-button class="action-button normal-button" style="width: 65px;" (click)="onEditPermission(client.clientId)">应用权限</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>